<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
</head>
<body>
<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<div id="app">
  <ul>
    <li v-for="nav in navs">{{nav}}</li>
  </ul>
</div>
<div id="root">

</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
     new Vue({
       el:'#app',
       data:{
           navs:["item1","item2","item3"]
       }
     })

</script>
<script src="../../lib/react/react.development.js"></script>
<script src="../../lib/react/react-dom.development.js"></script>
<script src="../../lib/react/babel.min.js"></script> <!--jsx -->

<script type="text/babel">
  let navs=["item1","item2","item3"];

  let listItems = navs.map(function (item) {
    return <li>{item}</li>;
  })

  /*listItems:
  * [<li>1</li>,<li>2</li>....]
  * */
  console.log("listItems:")
  console.log(listItems);

  let Siders = function (props) {
    return <ul>{props.items}</ul>  /*<li>1<li><li>2</li>*/
  }

  let ele = <Siders items={listItems}/>

  ReactDOM.render(ele,document.getElementById('root'));
</script>

</html>
